<template>
  <div class="tree-container">
    <!-- <div class="header">
        <div class="right">
          <el-input placeholder="请输入建筑物名称" v-model="orgName" style="width: 210px; margin-right: 20px" size="small"
            clearable @clear="searchClick">
            <el-button slot="append" :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'" @click="searchClick">
            </el-button>
          </el-input>
        </div>
      </div> -->
    <div :class="['middle', first ? 'middle1' : '']">
      <!-- <el-tree v-if="isTree" :data="dataTree" node-key="id" :props="defaultProps" @node-click="handleNodeClick"
          ref="refTree" :expand-on-click-node="false">
          <div class="custom-tree-node" slot-scope="{ node, data }" @mouseenter="slideIn(data)"
            @mouseleave="slideAway(data)">
            <span>{{ node.label }}</span>
            <div class="tree-node_ctrls" v-show="data.showCtrls">
            </div>
          </div>
        </el-tree> -->

      <el-tree
        ref="vuetree"
        :data="dataTree"
        :props="defaultProps"
        @node-click="handleNodeClick"
        accordion
        lazy
        :load="loadNode"
        check-strictly
        node-key="id"
      ></el-tree>

      <!-- @node-collapse="foldTreeState"
        @node-expand="unfoldTreeState" -->
    </div>
    <div class="footer">
      <!-- <el-pagination v-show="total > 20" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="page" :page-size="limit" layout="prev, pager, next" :total="total" :pager-count="3"></el-pagination> -->
    </div>
  </div>
</template>

<script>
import { reqOrgList, reqSpaceManager } from "@api/api.js";
import { mapState } from "vuex";

export default {
  components: {},
  props: [],
  mixins: [],
  data() {
    return {
      isTree: true,
      dataTree: [],
      page: 1,
      limit: 99,
      total: 0,
      orgName: "",
      defaultProps: {
        children: "children",
        label: "orgName",
        isLeaf: "hasChildren",
        id: "id",
      },
      first: true, //第一次加载，点击后消除
      loadingSearch: false,
      checkkey: 0, //选中的key
    //   checkorg: "",
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 树形节点关闭时触发
    // foldTreeState(data, node, ele) {
    // //   console.log(data);
    //   if(this.checkorg.indexOf(data.id) != -1){ //判断是否是子节点的父级
    //     this.$refs.vuetree.setCurrentKey(data.id);
    //   }
    // },
    // // 树形节点展开时触发
    // unfoldTreeState(data, node, ele) {
    //     // console.log(data);
    //     if(this.checkorg.indexOf(data.id) != -1){
    //     this.$refs.vuetree.setCurrentKey(this.checkkey);
    //     }
    // },
    // 点击一条
    handleNodeClick(data, checked) {
    //   console.log(data);
      //    console.log(checked);
      if (checked.level == 1) {
        // if(this.checkkey==0)return;
        this.$refs.vuetree.setCurrentKey(this.checkkey || null); //通过 key 设置某个节点的当前选中状态,为 null 则取消当前高亮的节点
        return; //父级不走
      }
      this.checkkey = data.id; // 存储选中的key
      //   this.checkorg=data.orgId;//存储父级id
      let params = {
        spaceId: data.id,
      };
      this.$emit("toggleOrgId", params);
      this.first = false;
    },
    async loadNode(node, resolve) {
      //   console.log(node);
      if (node.level === 1) {
        let data = [];
        let params = {
          userId: this.user.userId,
          roleName: this.user.roleName,
          metaCode: 1,
          orgId: node.data.id,
          isStatistics: 0,
          // name:this.orgName
        };
        let res = await reqSpaceManager(1, 999, params);
        // console.log(res);
        res.data.rows.forEach((item) => {
          data.push({
            orgName: item.name,
            id: item.id,
            orgId: item.orgId,
            hasChildren: true, //无子级
          });
        });
        return resolve(data);
      } else {
        return resolve([]);
      }
    },

    // 获取列表
    async getDataList() {
      let params = {
        tenantId: this.user.tenantId,
        userId: this.user.userId,
        roleName: this.user.roleName,
        orgName: this.orgName,
      };
      let res = await reqOrgList( params);
    //   console.log(res);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.dataTree = res.data.rows;
      this.total = res.data.total;
      this.first = false; //true会默认选中第一个
      //   if (res.data.rows.length > 0) {
      //     let data = {
      //       spaceId: res.data.rows[0].id,
      //     };
      //     this.$emit("toggleOrgId", data);
      //   } else {
      //     // 单位筛选为空时
      //     let data = {
      //       spaceId: "",
      //     };
      //     this.$emit("toggleOrgId", data);
      //   }
    },
    // getInitDataList() {
    //   this.page = 1;
    //   this.limit = 30;
    //   this.getDataList();
    // },
    // handleSizeChange(val) {
    //   this.limit = val;
    //   this.getDataList();
    // },
    // handleCurrentChange(val) {
    //   this.page = val;
    //   this.getDataList();
    // },

    // // 查询单位
    // async searchClick() {
    //   this.loadingSearch = true;
    //   await this.getDataList();
    //   this.loadingSearch = false;
    // },
    // // 滑动进去一条
    // slideIn(data) {
    //   this.$set(data, "showCtrls", true);
    // },
    // slideAway(data) {
    //   // console.log(data);
    //   this.$set(data, "showCtrls", false);
    // },
  },
};
</script>

<style scoped lang="less">
.tree-container {
  width: 100%;
  height: 100%;

  .header {
    position: relative;
    height: 65px;
    padding: 0 10px;
    border-bottom: 1px solid @primaryBorderColor;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .title {
      width: 25%;
      font-size: 20px;
      color: @primaryThemeTxtColor;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .right {
      width: 75%;
      // display: flex;
      // justify-content: flex-end;
      //   justify-content: space-between;
    }
  }
  .middle {
    //   height: calc(100% - 65px - 70px);
    height: 100%;
    overflow: hidden;
    overflow-y: scroll;
    padding: 10px 0;
    box-sizing: border-box;

    .custom-tree-node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      padding-left: 0.5%;
      box-sizing: border-box;

      .guanliyuan_guanliyuanliebiao {
        position: absolute;
        left: -2.5%;
        font-size: 12px;
      }

      .tree-node_ctrls {
        position: absolute;
        right: 0;
        width: 30%;
        text-align: right;
        padding-right: 10px;
        // background-color: pink;

        i {
          color: #aaa;
          font-size: 20px;
          margin-right: 10px;
          &:hover {
            color: #fff;
          }
        }
      }
    }
    ::v-deep .el-tree {
      height: 100%;
      font-size: 14px;
      background: @primaryHeaderBgcolor;
      box-sizing: border-box;
      padding: 0 10px;
      color: @primaryThemeTxtColor;
      overflow: hidden;
      overflow-y: scroll;
    }
    ::v-deep .el-tree-node__content {
      padding: 5px 0 !important;
      &:hover {
        background: @paginationBgcolor !important;
        border-radius: 4px;
      }
    }

    ::v-deep .el-tree-node.is-current.is-focusable > .el-tree-node__content {
      background-color: #7367f0 !important;
      border-radius: 4px;
    }

    // 解决点击白底问题
    ::v-deep .el-tree-node.is-focusable > .el-tree-node__content {
      // background-color: @primaryTree;
      border-radius: 4px;
    }

    ::v-deep .is-current > .el-tree-node__content > .el-tree-node__label {
      color: #f0f0f0;
    }
  }
  .middle1 {
    // 解决点击白底问题
    ::v-deep .el-tree > .el-tree-node:first-of-type > .el-tree-node__content {
      background-color: #7367f0 !important;
      color: #f0f0f0;
    }
  }
}

// input后面的查询按钮
::v-deep .el-input-group__append {
  color: #fff;
  border: none;
  background-color: #7367f0;
}

//   父节点白色背景问题
::v-deep .el-tree-node:focus > .el-tree-node__content {
  background-color: transparent !important;
}
</style>
